<!-- 子组件 TeacherCard.vue -->
<template>
    <el-card class="teacher-card">
      <div class="teacher-header">
        <el-avatar :size="60" :src="teacher.avatar" />
        <div class="teacher-info">
          <h3 class="name">{{ teacher.name }}</h3>
          <p class="title">{{ teacher.title }}</p>
          <div class="meta">
            <el-tag type="warning" size="small">
              <el-icon><Star /></el-icon>
              {{ teacher.rating }}
            </el-tag>
            <span class="experience">
              <el-icon><Timer /></el-icon>
              教龄 {{ teacher.experience }}年
            </span>
          </div>
        </div>
      </div>
  
      <el-divider />
  
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-icon class">
            <el-icon><Notebook /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ teacher.classCount }}</div>
            <div class="stat-label">创建班级</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon student">
            <el-icon><UserFilled /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ teacher.studentCount }}</div>
            <div class="stat-label">学员总数</div>
          </div>
        </div>
        <div class="stat-item">
          <div class="stat-icon question">
            <el-icon><EditPen /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-value">{{ teacher.questionCount }}</div>
            <div class="stat-label">编写试题</div>
          </div>
        </div>
      </div>
  
      <div class="class-section">
        <h4 class="section-title">当前班级</h4>
        <el-scrollbar height="200px">
          <div 
            v-for="cls in teacher.classes"
            :key="cls.id"
            class="class-item"
          >
            <div class="class-info">
              <div class="class-name">{{ cls.name }}</div>
              <div class="class-meta">
                <span class="students">
                  <el-icon><User /></el-icon>
                  {{ cls.currentStudents }}/{{ cls.maxStudents }}
                </span>
                <span class="date">
                  <el-icon><Calendar /></el-icon>
                  {{ cls.startDate }}
                </span>
              </div>
            </div>
            <el-progress 
              :percentage="cls.progress"
              :color="getProgressColor(cls.progress)"
              :stroke-width="8"
            />
          </div>
        </el-scrollbar>
      </div>
    </el-card>
  </template>
  
  <script setup lang="ts">
  import { 
    Star, Timer, Notebook, UserFilled, EditPen, User, Calendar 
  } from '@element-plus/icons-vue'
  
  const props = defineProps({
    teacher: {
      type: Object,
      required: true
    }
  })
  
  const getProgressColor = (percentage) => {
    if (percentage >= 90) return '#f56c6c'
    if (percentage >= 75) return '#e6a23c'
    return '#67c23a'
  }
  </script>
  
  <style lang="scss" scoped>
  .teacher-card {
    margin-bottom: 20px;
    border-radius: 12px;
    transition: transform 0.3s ease;
  
    &:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    }
  
    .teacher-header {
      display: flex;
      align-items: center;
      padding: 16px;
  
      .el-avatar {
        border: 2px solid #fff;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
      }
  
      .teacher-info {
        margin-left: 20px;
  
        .name {
          margin: 0;
          font-size: 18px;
          color: #2c3e50;
        }
  
        .title {
          margin: 4px 0;
          color: #909399;
          font-size: 14px;
        }
  
        .meta {
          display: flex;
          align-items: center;
          gap: 10px;
  
          .experience {
            font-size: 12px;
            color: #666;
            display: flex;
            align-items: center;
            gap: 4px;
          }
        }
      }
    }
  
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 15px;
      padding: 16px 0;
  
      .stat-item {
        background: rgba(245, 247, 250, 0.8);
        border-radius: 8px;
        padding: 12px;
        display: flex;
        align-items: center;
  
        .stat-icon {
          width: 40px;
          height: 40px;
          border-radius: 8px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-right: 12px;
  
          &.class { background: #409eff; }
          &.student { background: #67c23a; }
          &.question { background: #e6a23c; }
  
          .el-icon {
            color: white;
            font-size: 20px;
          }
        }
  
        .stat-value {
          font-size: 18px;
          font-weight: 600;
          color: #303133;
        }
  
        .stat-label {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  
    .class-section {
      padding: 0 16px;
  
      .section-title {
        color: #409eff;
        font-size: 16px;
        margin-bottom: 12px;
        padding-left: 8px;
        border-left: 3px solid #409eff;
      }
  
      .class-item {
        padding: 12px;
        margin-bottom: 12px;
        background: #fff;
        border-radius: 8px;
        border: 1px solid #ebeef5;
  
        .class-info {
          margin-bottom: 8px;
  
          .class-name {
            font-size: 14px;
            color: #303133;
            margin-bottom: 4px;
          }
  
          .class-meta {
            display: flex;
            gap: 15px;
            font-size: 12px;
            color: #909399;
  
            span {
              display: flex;
              align-items: center;
              gap: 4px;
            }
          }
        }
  
        .el-progress {
          :deep(.el-progress-bar) {
            padding-right: 0;
            margin-right: 0;
          }
        }
      }
    }
  }
  
  @media (max-width: 768px) {
    .stats-grid {
      grid-template-columns: 1fr !important;
    }
  
    .teacher-header {
      flex-direction: column;
      text-align: center;
  
      .teacher-info {
        margin-left: 0 !important;
        margin-top: 12px;
      }
    }
  }
  </style>